<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram</title>
</head>
<body>
    <canvas id="physicsCanvas" width="400" height="400"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Set common styles
        ctx.strokeStyle = 'black';
        ctx.lineWidth = 2;
        ctx.fillStyle = 'black';
        
        // --- Define Geometry ---
        const centerX = 200;
        const coinCenterY = 180;
        const coinRadiusX = 35;
        const coinRadiusY = 75;
        const surfaceY = coinCenterY + coinRadiusY;

        // 1. Draw the horizontal surface (as a perspective rectangle)
        ctx.beginPath();
        const sf_front_left_x = 80;
        const sf_front_right_x = 320;
        const sf_back_offset_x = -20;
        const sf_back_offset_y = -40;
        
        ctx.moveTo(sf_front_left_x, surfaceY);
        ctx.lineTo(sf_front_right_x, surfaceY);
        ctx.lineTo(sf_front_right_x + sf_back_offset_x, surfaceY + sf_back_offset_y);
        ctx.moveTo(sf_front_left_x, surfaceY);
        ctx.lineTo(sf_front_left_x + sf_back_offset_x, surfaceY + sf_back_offset_y);
        ctx.lineTo(sf_front_right_x + sf_back_offset_x, surfaceY + sf_back_offset_y);
        ctx.stroke();

        // 2. Draw the coin (as an ellipse)
        ctx.beginPath();
        ctx.ellipse(centerX, coinCenterY, coinRadiusX, coinRadiusY, 0, 0, 2 * Math.PI);
        ctx.stroke();

        // 3. Draw the vertical axis of rotation (dashed line)
        ctx.save();
        ctx.beginPath();
        ctx.setLineDash([5, 4]);
        ctx.moveTo(centerX, coinCenterY - coinRadiusY - 20);
        ctx.lineTo(centerX, surfaceY);
        ctx.stroke();
        ctx.restore();

        // 4. Draw the force vector F (solid line with arrowhead)
        ctx.beginPath();
        ctx.moveTo(centerX, coinCenterY); // Start from center P
        ctx.lineTo(centerX, surfaceY);   // End at contact point F
        // Arrowhead at the bottom
        ctx.moveTo(centerX, surfaceY);
        ctx.lineTo(centerX - 5, surfaceY - 10);
        ctx.moveTo(centerX, surfaceY);
        ctx.lineTo(centerX + 5, surfaceY - 10);
        ctx.stroke();
        
        // 5. Draw the rotation indicator (curved arrow) and omega symbol
        const rotArrowCenterY = coinCenterY - coinRadiusY - 5;
        const rotArrowRadiusX = 22;
        const rotArrowRadiusY = 8;
        
        ctx.beginPath();
        ctx.ellipse(centerX, rotArrowCenterY, rotArrowRadiusX, rotArrowRadiusY, 0, Math.PI, 2 * Math.PI, false); // Bottom half of ellipse
        ctx.stroke();
        
        // Arrowhead for rotation
        const arrowheadX = centerX + rotArrowRadiusX;
        const arrowheadY = rotArrowCenterY;
        ctx.beginPath();
        ctx.moveTo(arrowheadX, arrowheadY);
        ctx.lineTo(arrowheadX - 8, arrowheadY - 5);
        ctx.moveTo(arrowheadX, arrowheadY);
        ctx.lineTo(arrowheadX - 8, arrowheadY + 5);
        ctx.stroke();

        // Draw the omega symbol
        ctx.font = 'italic bold 24px serif';
        ctx.textAlign = 'left';
        ctx.textBaseline = 'middle';
        ctx.fillText('ω', centerX + rotArrowRadiusX + 10, rotArrowCenterY);

        // 6. Draw labels (O, P, F) and center point
        ctx.font = 'bold 20px serif';
        
        // Label O
        ctx.textAlign = 'right';
        ctx.fillText('O', centerX - 8, coinCenterY - coinRadiusY + 10);

        // Label P and its point
        ctx.textAlign = 'left';
        ctx.fillText('P', centerX + 8, coinCenterY);
        ctx.beginPath();
        ctx.arc(centerX, coinCenterY, 3, 0, 2 * Math.PI);
        ctx.fill();

        // Label F
        ctx.textAlign = 'right';
        ctx.fillText('F', centerX - 8, surfaceY - 15);
        
        // 7. Draw the figure caption
        ctx.font = '18px sans-serif';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'bottom';
        ctx.fillText('Fig. 1.120.', canvas.width / 2, 360);

    </script>
</body>
</html>